<script setup lang="ts">
import { RouterView } from 'vue-router'
import HomeHeader from './components/HomeHeader.vue'
import useScale from './hooks/useScale';
import { computed } from 'vue';

// 目标屏幕
const screenOptions = {
  targetWidth: 1920, // 设计稿的宽度
  targetHeight: 1080 // 设计稿的高度
};
const { scale } = useScale(screenOptions);
const style = computed(() => ({

  transform: `scale(${scale.value}) translate(-50%, -50%)`
}));
</script>

<template>
  <div class="relative w-screen h-screen">
    <div class="h-full flex flex-col absolute left-[50%] top-[50%] origin-top-left" :style="style">
      <HomeHeader />
      <div class="flex-1 overflow-y-scroll hide-scrollbar">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<style scoped>
.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE和Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* WebKit浏览器 */
}

.relative.w-screen.h-screen {
  background-image: url('@/assets/png/首页背景图.png'); /* 设置背景图片 */
  background-size: cover; /* 使背景图片覆盖整个元素 */
  background-position: center; /* 使背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
}
</style>
